<template>
  <a-layout id="app-layout-sider">
    <a-layout-sider v-model="collapsed" theme="light" class="layout-sider">
      <div class="logo">
        <img class="pic-logo" src="~@/assets/logo.png" />
        <div>名称</div>
      </div>
      <div class="menu-item">
        <div
          v-for="(menuInfo, index) in menu"
          :key="index"
          :class="current == menuInfo.menu ? 'active' : ''"
          @click="menuHandle(menuInfo)"
        >
          <img
            :src="
              current == menuInfo.menu ? menuInfo.activeIcon : menuInfo.icon
            "
          />

          <p>{{ menuInfo.title }}</p>
        </div>
      </div>
      <div class="menu-item menuBottom">
        <div
          v-for="(menuInfo, index) in menu2"
          :key="index"
          @click="tabFn(index)"
        >
          <img :src="menuInfo.icon" />

          <p>{{ menuInfo.title }}</p>
          <div class="appDownlad">
            <div>扫码下载 <span>《XXXXX》</span> App</div>
            <div class="code"><img src="~@/assets/1.jpg" /></div>
          </div>
        </div>
      </div>
    </a-layout-sider>
    <setUp v-if="isSetUp"  @closeFn="isSetUp=false" />
    <a-layout>
      <a-layout-content class="layout-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import setUp from "./components/setUp.vue";

export default {
  name: "AppSider",
  components: { setUp },

  data() {
    return {
      collapsed: true,
      default_key: "menu_3",
      isSetUp: false,
      current: "",
      menu: {
       
        menu_3: {
          icon: require("@/assets/iconPark-link-cloud@2.png"),
          activeIcon: require("@/assets/iconPark-link-cloud@1x.png"),
          title: "文件",
          menu: "menu_3",

          pageName: "DocumentFile",
          params: {},
        },
        menu_2: {
          icon: require("@/assets/36.png"),
          activeIcon: require("@/assets/35.png"),
          title: "传输",
          pageName: "Other",
          menu: "menu_2",

          params: {},
        },
      },

      menu2: {
        menu_1: {
          icon: require("@/assets/34.png"),
          title: "设置",
          params: {},
        },
        menu_2: {
          icon: require("@/assets/md-vibration@1x.png"),
          title: "手机APP下载",
          params: {},
        },
      },
    };
  },
  created() {},
  mounted() {
    this.menuHandle();
  },
  methods: {
    tabFn(index) {
      console.log(index)
      if (index == 'menu_1') {
        this.isSetUp = true;
      }
    },
    menuHandle(e) {
      this.current = e ? e.menu : this.default_key;
      const linkInfo = this.menu[this.current];
      console.log("[home] load page:", linkInfo.pageName);
      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params });
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="less" scoped>
// 嵌套
#app-layout-sider {
  height: 100%;
  .logo {
    border-bottom: 1px solid #e8e8e8;
  }
  .pic-logo {
    height: 32px;
    //background: rgba(139, 137, 137, 0.2);
    margin: 10px;
  }
  .layout-sider {
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    flex: 0 0 100px !important;
    max-width: 100px !important;
    min-width: 100px !important ;
    width: 100px !important;
    background: #f4f5f7;
  }
  .menuBottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    > div:nth-child(1) {
      .appDownlad {
        display: none !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
      }
    }
    > div:nth-child(2) {
      position: relative;
    }
    .appDownlad {
      position: absolute;
      right: -250px;
      top: -163px;
      z-index: 10;
      display: none;
      padding: 13px;
      width: 240px;
      height: 240px;
      line-height: 20px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 1);
      text-align: center;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
      color: rgba(16, 16, 16, 1);
      font-size: 16px;
      span {
        color: #2f7df9;
      }
      .code {
        width: 182px;
        height: 182px;
        padding: 8px;
        margin: 0 auto;
        margin-top: 10px;

        border: 1px solid rgba(215, 215, 215, 1);
        img {
          width: 100%;
        }
      }
    }
    > div:nth-child(2):hover {
      .appDownlad {
        display: block !important;
      }
    }
  }
  .menu-item {
    margin-top: 20px;
    cursor: pointer;
    > div {
      margin-bottom: 30px;
    }

    .ant-menu-item {
      background-color: #fff;
      margin-top: 0px;
      margin-bottom: 0px;

      padding: 0 0px !important;
    }
    p {
      padding: 0;
      height: 20px;
      line-height: 20px;
      margin-top: 6px;
      font-size: 14px;
    }
  }
  .active {
    color: #2f7df9;
  }
}
</style>
